<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <!--网站图标-->
    <link rel="shortcut icon" href="../../images/favicon.ico">
    <!-- 样式 -->
    <link rel="stylesheet" href="../../css/login_phone.css">
    <link rel="stylesheet" href="../../element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="../../js/vue.js"></script>
    <!-- 引入axios库 -->
    <script src="../../js/axios.min.js"></script>
    <script src="../../element-ui/lib/index.js"></script>

</head>
<body>

<div>
    <h1>宠物领养系统·助力流浪宠物回归家庭</h1>
</div>

<div id="login_phone">
    <div class="login-box">
        <h2>手机验证码登录</h2>
        <form>
            <div class="user-box">
                <input type="text" v-model="phoneNumber">
                <label>手机号</label>
            </div>
            <div class="user-box">
                <input type="text" v-model="code">
                <label>验证码</label>
            </div>
            <a href="#">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <div @click="goBack">返回</div>
            <a href="#">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <div @click="getCode">获取验证码</div>
            </a>
            <a href="#">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <div @click="loginByPhone">登录</div>
            </a>
            </a>
        </form>
    </div>
</div>
</body>
<script>
    new Vue({
        el: '#login_phone',
        data() {
            return {
                //手机号验证码
                phoneNumber: '',
                code: '',
            };
        },
        methods: {
            /*-----------------登录操作-------------------*/
            //获取验证码：只有注册且完善了手机号的用户可以通过验证码登录
            getCode() {
                const _this= this;
                //检查手机号输入
                if (!this.checkedPhone()) {
                    this.$message.error({
                        message: '请输入正确的手机号',
                    });
                }else {
                    //通过校验，发起请求
                    axios.get("/users/sendMsg?phone="+this.phoneNumber).then(
                        function (response) {
                            //获取到响应
                            console.log(response.data);
                            if (response.data.code == 1) {
                                //提示框
                                _this.$message({
                                    message: '发送成功！',
                                    type: 'success'
                                });
                            }else {
                                //登录失败则显示提示信息
                                _this.$message.error(response.data.msg);
                            }
                        },
                        function (err) {
                            //请求失败，友好的提示框
                            _this.$message.error("服务器烦恼，请稍后重试");
                            //控制台打印信息
                            console.log(err);
                        });
                }
            },
            //登录请求
            loginByPhone() {
                if(!this.checkedPhone()){
                    this.$message.error({
                        message: '请输入正确的手机号',
                    });
                    return;
                }
                if(!this.checkedCode()){
                    this.$message.error({
                        message: '请输入正确的验证码',
                    });
                    return;
                }

                //把数据模型存到对象中
                const _this = this;
                const _window = window;
                //通过验证，发送登录请求
                axios.get("/users/loginByPhone?phone="+this.phoneNumber+"&code="+this.code).then(
                    function (response) {
                        //获取到响应信息，如果登录成功，进行跳转
                        console.log(response.data);
                        if (response.data.code == 1) {
                            //提示框
                            _this.$message({
                                message: '登录成功',
                                type: 'success'
                            });
                            //页面跳转
                            _window.location.href = '/web/page/main/main.html'
                        }
                        //登录失败则显示提示信息
                        _this.$message.error(response.data.msg);
                    },
                    function (err) {
                        //请求失败，友好的提示框
                        _this.$message.error("服务器烦恼，请稍后重试");
                        //控制台打印信息
                        console.log(err);
                    });
            },


            /*-----------------表单校验操作-------------------*/
            //手机号校验
            checkedPhone() {
                return /^1[3-9]\d{9}$/.test(this.phoneNumber);
            },
            //验证码校验：6位数字
            checkedCode(){
                return /^\d{6}$/.test(this.code);
            },

            //返回，使用账户密码登录
            goBack(){
                //页面跳转
                window.location.href = '/web/page/login/login.html';
            },
        }
    })
</script>
</html>